<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" timeline-item__content="width=device-width, initial-scale=1.0" />
  <title>Timeline</title>
  <link rel="stylesheet" href="../dist/aqua.css" />
  <link rel="stylesheet" href="./styles/demo.css" />
</head>

<body>
  <ul class="timeline">
    <li class="timeline-line"></li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>08:30</time>
        <div>签到</div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>09:30</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hmzpxe">新时代CSS布局
          </a>
        </div>
      </div>
      <div class="timeline-item__content">
        ​CSS布局经常是令前端开发者头痛的一块工作。但是近几年来，浏览器不断发展，开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。我们将深入了解这些新属性的特征，新时代的布局技巧、例子及最佳实践。希望听众会有所启发，利用这些新的CSS属性创造更符合浏览器本质的设计。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>10:20</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/no7l1o">剖析css-tricks新版，为你所用</a>
        </div>
      </div>
      <div class="timeline-item__content">
        新版css-tricks.com网站在社交媒体上得到众多好评，今天我们就一起来聊聊这次改版中运用到的一些新特性，这些新特性对用户体验带来什么样的改变，我们又如何将这些新特性运用于自己的项目中。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>12:00</time>
        <div>午餐</div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>13:00</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/rpl1tf">CSS创意与视觉表现</a>
        </div>
      </div>
      <div class="timeline-item__content">
        CSS的有趣之处就在于最终呈现出来的技能强弱与你自身的思维方式，创造力是密切相关的，本次分享通过一些精彩的案例，展现创意如何让CSS的视觉表现变得更有趣的。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>14:00</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hyku3f">CSS生成艺术</a>
        </div>
      </div>
      <div class="timeline-item__content">
        虽然在 CSS
        里不能直观地绘制出一条曲线，或者动态生成许多元素，我们仍然可以利用 CSS
        属性自身的特性，结合一些基本方法和想象力生成出非常有趣的图形，进行艺术创作。此次演讲就把这些过程和所使用的方法分享给大家。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>14:50</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/vg70mz">你不知道的五个 CSS 新特性</a>
        </div>
      </div>
      <div class="timeline-item__content">
        分享五个讲者在近期学习标准的过程中，发现的鲜为人知的 CSS
        特性，并通过相关代码、示例和故事，帮助大家发掘 CSS
        更多的乐趣和用武之地。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>15:40</time>
        <div>Coffee Time</div>
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>16:20</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/nays55">10 things I wish CSS authors knew about animations</a>
        </div>
      </div>
      <div class="timeline-item__content">
        动画可以让你的网站或 app
        更加自然、有趣、优美，但动画本身也可能是困难、缓慢、使人不悦的。让我们来一起看看一些浏览器发行者们希望作者们知道的，关于动画常见的误解、不为人知的特性、以及即将到来的技术。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>17:30</time>
        <div>
          <a target="_blank" href="https://www.yuque.com/cssconf/yog9rr/hbix70">CSS TIME</a>
        </div>
      </div>
      <div class="timeline-item__content">
        时间概念对于动画而言犹如灵魂一般，在WEB
        CSS中同样存在着时间范畴，Duration? Delay?
        究竟CSS的时间概念存在于哪些地方，又能起到哪些作用？我们将基于Demo实例由浅入深逐一分析CSS
        TIME，也许从此你对它会有新的认知。
      </div>
    </li>
    <li class="timeline-item">
      <div class="timeline-item__timestamp">
        <div class="dot"></div>
        <time>18:30</time>
        <div>结束</div>
      </div>
    </li>
  </ul>
</body>

</html>